<template>
    <div class="QilinDialog">
        <el-dialog
            :visible.sync="ownDialogConfig.isShow"
            :title="ownDialogConfig.title || '提示' "
            :top="ownDialogConfig.top || '15vh'"
            :close-on-click-modal="ownDialogConfig.closeOnClickModal || false"
            :close-on-press-escape="ownDialogConfig.closeOnPressEscape || false"
            :modal="ownDialogConfig.modal === false ? false : true"
            :modal-append-to-body="ownDialogConfig.modalAppendToBody === false ? false : true"
            :append-to-body="ownDialogConfig.appendToBody === false ? false : true"
            :width="ownDialogConfig.width || '600px' "
            :center="ownDialogConfig.center || false"
            :before-close="handleClose"
            :destroy-on-close="ownDialogConfig.destroy"
        >
            <slot></slot>
            <template v-slot:footer v-if="!ownDialogConfig.isHideFooter">
                <template v-if="ownDialogConfig.additionalButton && ownDialogConfig.additionalButton.length > 0">
                    <el-button
                        v-for="(item,index) in ownDialogConfig.additionalButton"
                        :key="item.btnName+index"
                        :type="item.btnType || 'default' "
                        :size="item.btnSize || 'default' "
                        @click="item.btnClick && item.btnClick()"
                    >{{item.btnName || "额外按钮" }}</el-button>
                </template>
                <el-button
                    v-if="ownDialogConfig.cancelBtnConfig ? ownDialogConfig.cancelBtnConfig.isShow === false ? false : true : true"
                    :type="(ownDialogConfig.cancelBtnConfig && ownDialogConfig.cancelBtnConfig.btnType) || 'default'"
                    :size="(ownDialogConfig.cancelBtnConfig && ownDialogConfig.cancelBtnConfig.btnSize) || 'small'"
                    @click="handleClose"
                >
                    {{(ownDialogConfig.cancelBtnConfig && ownDialogConfig.cancelBtnConfig.btnName) || "取消"}}
                </el-button>
                <el-button
                    v-if="ownDialogConfig.confirmBtnConfig ? ownDialogConfig.confirmBtnConfig.isShow === false ? false : true : true"
                    :type="(ownDialogConfig.confirmBtnConfig && ownDialogConfig.confirmBtnConfig.btnType) || 'primary'"
                    :size="(ownDialogConfig.confirmBtnConfig && ownDialogConfig.confirmBtnConfig.btnSize) || 'small'"
                    @click="$emit('submitConfirm')"
                >
                    {{(ownDialogConfig.confirmBtnConfig && ownDialogConfig.confirmBtnConfig.btnName) || "确定"}}
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:"QilinDialog",
    props:{
        dialogConfig:{
            type:Object,
            default(){
                return {
                    isShow:false, //是否显示弹窗
                    title:"提示", //弹窗标题
                    top:"15vh", //margin-top值--会对拖拽造成影响
                    closeOnClickModal:false, //是否可以通过点击阴影部分即modal关闭弹窗
                    closeOnPressEscape:false, //是否可以通过按下ESC关闭弹窗
                    modal:true, //是否需要遮罩层
                    modalAppendToBody:true, //遮罩层是否插入至body元素上去
                    appendToBody:true, //弹窗元素自身是否插入到body元素上去
                    width:"600px", //弹窗的宽度
                    center:false, //弹窗头部和底部是否水平居中
                    className:"", //弹窗的自定义类名
                    destroy:false,//关闭弹窗销毁弹窗内容
                    isHideFooter:false, //是否隐藏弹窗脚部元素部分
                    confirmBtnConfig:{ //弹窗确认按钮的配置项
                        btnName:"确定",
                        btnType:"primary",
                        btnSize:"small",
                        isShow:true
                    },
                    cancelBtnConfig:{ //弹窗取消按钮的配置项
                        btnName:"取消",
                        btnType:"default",
                        btnSize:"small",
                        isShow:true
                    },
                    additionalButton:[ //额外按钮的配置项
                        {
                            btnName:"额外按钮",
                            btnType:"default",
                            btnSize:"default",
                            btnClick:"event",
                        }
                    ]
                }
            }
        }
    },
    data(){
        return {

        }
    },
    computed:{
        ownDialogConfig:{
            get(){
                return this.dialogConfig;
            },
            set(val){
                this.$emit("update:dialogConfig",val);
            }
        }
    },
    methods:{
        // 点击关闭按钮事件监听
        handleClose(){
            this.$emit("handleClose");
        }
    },
    mounted(){

    }
}
</script>

<style lang="scss">
.el-dialog{
    // border-radius: 16px;
    >.el-dialog__header{
        border-bottom:1px solid $border-color;
        margin-right:0;
        display:flex;
        align-items:center;
        padding:15px;
        >span{
            color:$text-color-85;
            font-size:$medium-text-size;
        }
    }
    >.el-dialog__body{
        max-height:550px;
        overflow:auto;
        -ms-overflow-style:none;// ie下隐藏滚动条
        scrollbar-width:none;
        &::-webkit-scrollbar{ //谷歌下隐藏滚动条
            display:none;
        }
        padding:20px;
    }
}
</style>
